<template>
  <view class="content">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="avatar">
        <image src="/static/images/avatar/default-avatar.png" mode="aspectFill"></image>
      </view>
      <view class="info">
        <text class="nickname">学习者</text>
        <text class="study-days">已坚持学习 {{studyDays}} 天</text>
      </view>
    </view>

    <!-- 学习统计 -->
    <view class="stats-card">
      <view class="stats-item">
        <text class="number">{{totalQuestions}}</text>
        <text class="label">总题数</text>
      </view>
      <view class="stats-item">
        <text class="number">{{completedQuestions}}</text>
        <text class="label">已练习</text>
      </view>
      <view class="stats-item">
        <text class="number">{{wrongQuestions}}</text>
        <text class="label">错题数</text>
      </view>
      <view class="stats-item">
        <text class="number">{{accuracy}}%</text>
        <text class="label">正确率</text>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <view class="function-item" @tap="clearHistory">
        <text class="label">清除练习记录</text>
        <text class="arrow">></text>
      </view>
      <view class="function-item" @tap="about">
        <text class="label">关于</text>
        <text class="arrow">></text>
      </view>
    </view>
  </view>
</template>

<script>
import { questionBank, questionStorage } from '@/store/questions.js'

export default {
  data() {
    return {
      studyDays: 0,
      totalQuestions: 0,
      completedQuestions: 0,
      wrongQuestions: 0,
      accuracy: 0
    }
  },
  onShow() {
    this.loadStatistics()
  },
  methods: {
    loadStatistics() {
      // 获取总题目数
      this.totalQuestions = questionBank.questions.length

      // 统计已练习题目和错题数
      let completed = 0
      let wrong = 0
      let totalCorrect = 0
      let totalAttempts = 0

      questionBank.questions.forEach(question => {
        const stats = questionStorage.getQuestionStats(question.id)
        if (stats.totalAttempts > 0) {
          completed++
          if (stats.wrongCount > 0) {
            wrong++
          }
          totalCorrect += stats.correctCount
          totalAttempts += stats.totalAttempts
        }
      })

      this.completedQuestions = completed
      this.wrongQuestions = wrong
      this.accuracy = totalAttempts > 0
        ? Math.round((totalCorrect / totalAttempts) * 100)
        : 0

      // 获取学习天数
      const firstDay = uni.getStorageSync('firstStudyDay')
      if (firstDay) {
        const days = Math.ceil((Date.now() - firstDay) / (24 * 60 * 60 * 1000))
        this.studyDays = days
      } else {
        uni.setStorageSync('firstStudyDay', Date.now())
        this.studyDays = 1
      }
    },
    clearHistory() {
      uni.showModal({
        title: '确认清除',
        content: '确定要清除所有练习记录吗？此操作不可恢复。',
        success: (res) => {
          if (res.confirm) {
            questionStorage.clearAllProgress()
            this.loadStatistics()
            uni.showToast({
              title: '清除成功',
              icon: 'success'
            })
          }
        }
      })
    },
    about() {
      uni.showModal({
        title: '关于',
        content: '这是一个帮助你提高学习效率的刷题小程序。',
        showCancel: false
      })
    }
  }
}
</script>

<style>
.content {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.user-info {
  background: #fff;
  border-radius: 12rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  overflow: hidden;
  margin-right: 30rpx;
}

.avatar image {
  width: 100%;
  height: 100%;
}

.info {
  flex: 1;
}

.nickname {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.study-days {
  font-size: 24rpx;
  color: #999;
}

.stats-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.stats-item {
  text-align: center;
}

.stats-item .number {
  font-size: 36rpx;
  font-weight: bold;
  color: #007AFF;
  display: block;
  margin-bottom: 10rpx;
}

.stats-item .label {
  font-size: 24rpx;
  color: #999;
}

.function-list {
  background: #fff;
  border-radius: 12rpx;
}

.function-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.function-item:last-child {
  border-bottom: none;
}

.function-item .label {
  font-size: 28rpx;
  color: #333;
}

.function-item .arrow {
  font-size: 28rpx;
  color: #999;
}
</style>